<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background-color: #000;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<button id="btn">开灯</button>
		<div id="box"></div>
		
	</body>
	<script>
		var btn =document.getElementById('btn');
		var box =document.getElementById('box');
		var color = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
		var flag = 0;
		var time = null;
		btn.onclick = function(){
			if(flag == 0){
				time = setInterval(function(){
					var str = "#" 
					for(var i = 0; i < 6; i++){
						var a = Math.floor(Math.random()*(color.length));
						str += color[a];
					}
					box.style.backgroundColor = str;
				},50)
				btn.innerHTML = '关灯';
				flag = 1;
			}else{
				clearInterval(time);
				box.style.backgroundColor = "#000";
				btn.innerHTML = '开灯';
				flag = 0;
			}
			
			
			
			
		}
	</script>
</html>